import React from 'react';
class App extends React.Component {
    render() {
        const boss = '李云龙';
        const user = {
            fistName: "函数",
            lastName: "测试"
        };
        const greet = <div>react is very good</div>;
        const show = false;//false;
        const a = [0, 1, 2];
        return (
            <div>
                <h2>独立团,团长{boss}</h2>
                <p>{formatName(user)}</p>
                {greet}
                {/* 条件语句 */}
                {show && greet}
                {show ? greet : "登录"}

                {/* 数组 */}
                <ul>
                   {/* diff时候，⾸先⽐较type，然后是key，所以同级同类型元素，key值必须得 唯⼀ */}
                    {
                        a.map(item => (
                            <li key={item}>{item}</li>
                        ))
                    }
                </ul>
            </div>
        );
    }
}
function formatName(name) {
    return name.fistName + " " + name.lastName;
}
export default App;

            /*
             *
            # JSX
                JSX是⼀种JavaScript的语法扩展，其格式⽐较像模版语⾔，但事实上完全
                是在JavaScript内部实现的。
                JSX可以很好地描述UI，能够有效提⾼开发效率，体验JSX。
            
    1. 基本使⽤  {} 声明变量
        const boss = '李云龙';
        <h2>独立团,团长{boss}</h2>
    2.函数 formatName(name)
        函数也是合法表达式
    3.对象 ：jsx是js对象，也是合法表达式 eg: greet

    4.条件语句:条件语句可以基于上⾯结论实现
        { show && greet }
        { show ? greet : "登录" }
    5.数组会被作为⼀组⼦元素对待，数组中存放⼀组jsx可⽤于显示列表数据
    const a = [0, 1, 2];
            <ul>
                   {
                    a.map(item => (
                        <li key={item}>{item}</li>
                    ))
                }
            </ul>
    6. 属性的使⽤:属性：静态值⽤双引号，动态值⽤花括号；class、for等要特殊处
        import logo from "./logo.svg";
        const jsx = (
            <div>

            <img src={logo} style={{ width: 100 }} className="img"
            />
            </div>
        );
    7.模块化

    css模块化，创建index.module.css，index.js
        import style from "./index.module.css"; 
        <img className={style.logo} />

    或者npm install sass -D

        import style from "./index.module.scss"; 
        <img className={style.logo} />
    更多css modules规则参考[http://www.ruanyifeng.com/blog/2016/06/css_modules.html]

 */